import VueRouter from 'vue-router'
import Vue from 'vue'

// vue项目的脚手架是 vue-cli ，它的底层代码是webpack写的
// 在我们的项目里面看不到webpack.config.js。但是能看到vue.config,js
// 现在如果想对webpack做一些配置，直接去vue.config.js里面配置即可。 这个文件就是webpack.config.js的
// 封装版本，里面将一些vue的基础配置，比如一些loader。 一些路径别名 比如@符号，他也帮我们默认集成好了，所以可以直接使用，不需要配置
// 如果你说我就想看看webpack.config.js的配置， vue inspect > a.js  含义就是将webpack.config.js的底层代码输出到a.js里面去查看。我们如果想配置webpack就去vue.config.js里面配置
import FindComVue from '@/views/FindCom.vue'
import MusicComVue from '@/views/MusicCom.vue'
import FriendsComVue from '@/views/FriendsCom.vue'
import FriendDetail from '@/views/FriendDetail.vue'
import NotFound404 from '@/views/NotFound404.vue'

Vue.use(VueRouter)  // 这个就是注册一个插件
const router = new VueRouter({
  // https://v3.router.vuejs.org/zh/guide
  // 开发环境下面  hash模式和history模式都可以使用
  // 线上环境如果使用history模式，需要后端java在nginx里面做一个配置
  mode: "history", //默认是hash 路由地址带有#
  routes: [
    // 路由重定向
    { path: '/', redirect: '/find' },
    { name: 'long', path: '/a/b/c/d/e/f/long', component: FriendsComVue},
    { path: '/find', component: FindComVue},
    { path: '/music', component: MusicComVue},
    { path: '/friend', component: FriendsComVue},
    // 动态路由 参数可选 加一个问号
    { path: '/frienddetail/:id?', component: FriendDetail},
    // 下面是针对所有的路由匹配不到的情况下，做一个兜底的路由规则
    // 这条规则一定要放在最后一个
    { path: '*', component: NotFound404 }
  ],
  // 一般不改，linkActiveClass这个是模糊匹配的类名
  // linkExactActiveClass 精准匹配的类名
  linkActiveClass: 'heima-95-active',
  linkExactActiveClass: 'heima-95-exact-active',
})

export default router